<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .box{
      width: 980px;
      margin: 20px auto;
    }
    .user_content{
      overflow: hidden;
    }
    .user_content textarea:nth-child(1){
      border: none;
      border: 1px solid #ccc;
      width: 100%;
      height: 150px;
      /* padding-top: 10px;
      padding-left: 10px; */
      padding:10px 0 0 10px;
      border-radius: 10px;
      outline-style: none;
      box-sizing: border-box;
      /* 禁止拖拽 */  
      resize: none;
    }
    .user_content input,.user_content span{
      float: right;
    }
    .user_img,.msg{
      float: left;
      
    }
    .msg span{
      display: block;
    }
    .content li{
      overflow: hidden;
      border-bottom: 1px solid #ccc;
    }
    .content_msg{
      width: 876px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="user_content">
      <textarea  maxlength="200" placeholder="说点什么..." name="" id="" class="textarea"></textarea>
      <input type="button" value="发布">
      <span class="total">/200</span>
      <span class="word_number">0</span>
    </div>
    <div class="content">
      <ul>
        <li>
          <span class="user_img"><img src="03.jpg" alt=""></span>
          <div class="msg">
            <span class="user_title">百里守约</span>
            <span class="time">作者发布于：2018-3-4 16:34:09</span>
            <span class="content_msg">内容</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <script>
    //1.先获取到文本框
    var textarea = document.querySelector('.textarea');
    //2.在获取计数的span标签
    var cunter = document.querySelector('.word_number');
    //3.给文本框textarea注册输入框事件
    textarea.oninput = function(){
      if(textarea.value.length <= 200){
        cunter.innerText = textarea.value.length
      }
    }
    //点击发布
    var btn = document.querySelector('input[type="button"]');
    var ul = document.querySelector('ul');
    btn.onclick = function(){
      //创建li标签
      var li = document.createElement('li');
      //创建用户头像标签
      var user_img = document.createElement('span');
      user_img.className = 'user_img';
      //创建用户头像
      var img = document.createElement('img');
      img.src = '03.jpg';

      user_img.appendChild(img);
      li.appendChild(user_img)
      ul.appendChild(li);

      //创建用户信息
      var msg = document.createElement('div');
      msg.className = 'msg';
      //创建用户名称
      var title = document.createElement('span');
      title.className = 'user_title';
      title.innerText = '百里守约';
      //创建用户发布时间和日期
      var time = document.createElement('span');
      time.className = 'time';
      time.innerText = '作者发布于：'+getTime();
      //创建用户内容信息
      var content_msg = document.createElement('span')
      content_msg.className = 'content_msg';
      content_msg.innerText = textarea.value;

      msg.appendChild(title);
      msg.appendChild(time);
      msg.appendChild(content_msg);
      li.appendChild(msg);
    }
    //获取系统的发布时间(定义一个函数)
    function getTime(){
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth()+1;
      var daay = date.getUTCDate();
      var h = date.getHours();
      var m = date.getMinutes();
      var s = date.getSeconds();

      month = month >= 10 ? month : '0'+month;
      daay = daay >= 10 ? daay : '0'+daay;
      h = h >= 10 ? h : '0'+h;
      m = m >= 10 ? m : '0'+m;
      s = s >= 10 ? s : '0'+s;
      var time_str = year +'-'+ month +'-'+ daay +'  '+ h +':'+ m +':'+ s;
      return(time_str)
    }
  </script>
</body>
</html>